<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机颜色</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      /* background-color: rgb(red, green, blue); */
      margin-bottom: 50px;
    }

    body {
      background-color: #868686;
    }
  </style>
</head>

<body>
  <script>
    // 1. 自定义一个随机颜色函数
    // let arr = ['red', 'green', 'yellow', 'orange', 'blue', 'lawngreen', 'pink']
    // let color = arr[Math.floor(Math.random() * arr.length)]


    function getRandomColor(flag = true) {
      if (flag) {
        let color = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 1; i <= 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          // console.log(arr[random])
          color += arr[random]
        }
        // console.log(color)
        return color
      } else {
        let arr = []
        for (let i = 1; i <= 3; i++) {
          let random = Math.floor(Math.random() * 256)
          arr[i - 1] = random
        }
        // console.log(arr)
        return `rgb(${arr[0]},${arr[1]},${arr[2]})`
      }
    }
    document.write(`<div style="background-color: ${getRandomColor()}"></div>`)
    document.write(`<div style="background-color: ${getRandomColor(true)}"></div>`)
    document.write(`<div style="background-color: ${getRandomColor(false)}"></div>`)
  </script>
</body>

</html>